<template>
  <div style="height:100%">
    <div class="articleManage-content" v-if="articleList.length">
      <el-card
        class="articleManage"
        shadow="never"
        v-for="article in articleList"
        :key="article.id"
      >
        <ArticleManageCard :article="article" />
      </el-card>
      <div class="pagination">
        <el-pagination
          small
          background
          :current-page="page"
          @current-change="pageChange"
          :page-size="limit"
          layout="prev, pager, next"
          :total="userInfo.article_count"
        >
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无文章"></el-empty>
    </div>
  </div>
</template>

<script>
import ArticleManageCard from '@/components/Article/ArticleManageCard'
export default {
  props: {},
  components: {
    ArticleManageCard
  },
  data() {
    return {
      limit: 5,
      page: 1,
      // 文章列表
      articleList: [],
      userInfo: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 等待页面渲染结束后获取数据
    this.$nextTick(() => {
      // 获取用户信息
      this.getUserInfo()
      // 监听删除文章事件后刷新列表
      this.$bus.$on('DeleteArticleSuccess', this.ReloadArticleList)
    })
  },
  beforeDestroy() {
    this.$bus.$off('DeleteArticleSuccess', this.ReloadArticleList)
  },
  methods: {
    getUserInfo() {
      this.$store.dispatch('user/GetUserInfo').then(() => {
        this.userInfo = this.$store.state.user.userInfo
        // 获取文章列表
        this.getArticleList()
      })
    },
    // 获取文章列表
    async getArticleList() {
      const { userInfo, limit, page } = this
      const res = await this.$API.article.getArticleByAuthorId(
        this.userInfo.id,
        limit,
        page
      )
      // 如果没有更多数据
      if (!res.data) {
        // 判断是否为第一页
        if (this.page != 1) {
          this.page--
          this.getArticleList()
        } else {
          // 显示空数据
          return (this.articleList = [])
        }
      }
      if (res.status == 200) {
        this.articleList = res.data.payload
      }
    },
    // 刷新文章列表
    ReloadArticleList() {
      this.getArticleList()
      // 重新获得用户列表
      this.$store.dispatch('user/GetUserInfo')
    },
    // 页数变化
    pageChange(page) {
      // console.log(page)
      this.page = page
      this.getArticleList()
    }
  }
}
</script>

<style scoped>
.articleManage-content {
  /* margin-top: 20px; */
  height: 100%;
  position: relative;
}
.articleManage {
  margin-bottom: 20px;
}
</style>
